<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>练习5：DOM操作</title>
		<style type="text/css">
			html,div,ul,li {
				margin: 0px;
				padding: 0px;
				}
			a{
				cursor: pointer;
				}
			li {
				list-style: none;
				cursor: pointer;
				}
			fieldset {
				border: #000 1px dashed;
				width: 225px;
				height: 225px;
				padding: 10px;
				text-align: center;
				float: left;
				margin-left: 5px;
				}
			#cont_left {
				width: 300px;
				height: 500px;
				float: left;
				}
			#cont_right {
				float: left;
				}
			.newcss1{
				background-color: yellowgreen;
				}
		</style>
	</head>
	<body>
		<div id="cont_left">
			<ul><img src="img/fold.gif"><a onclick="show('menu1')"> 通过DOM获取信息 </a>
				<ul id="menu1">
					<li onclick="showImg()"><img src="img/doc.gif">获取原始图片路径</li>
					<li onclick="getFruit()"><img src="img/doc.gif">获取我喜欢的水果</li>
				</ul>
			</ul>

			<ul><img src="img/fold.gif"><a onclick="show('menu2')"> 通过DOM操作元素 </a>
				<ul id="menu2">
					<li onclick="createImg()"><img src="img/doc.gif">创建图片</li>
					<li onclick="cloneImg()"><img src="img/doc.gif">克隆图片</li>
					<li onclick="changeImg()"><img src="img/doc.gif">改变图片</li>
					<li onclick="removeImg()"><img src="img/doc.gif">删除图片</li>
				</ul>
			</ul>

			<ul><img src="img/fold.gif"><a onclick="show('menu3')"> 通过DOM操作样式 </a>
				<ul id="menu3">
					<li onclick="changeCss1()"><img src="img/doc.gif">为原始图片加上行间样式</li>
					<li onclick="changeCss2()"><img src="img/doc.gif">为所有的fieldset加上内部样式</li>
				</ul>
			</ul>

		</div>
		<fieldset>
			<legend>原始图片</legend>
			<img id="fruit" src="img/fruit.jpg">
		</fieldset>
		<fieldset>
			<legend>图片路径</legend>
			<p id="msg1">在这里显示</p>
		</fieldset>
		<fieldset>
			<legend>选择你喜欢的水果</legend>
			<ul style="text-align: left;">
				<li>
					<input name="enjoy" type="checkbox" value="苹果" checked="checked"/>苹果
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="香蕉" checked="checked" />香蕉
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="葡萄" checked="checked"/>葡萄
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="梨" checked="checked" />梨
				</li>
				<li>
					<input name="enjoy" type="checkbox" value="西瓜" checked="checked"/>西瓜
				</li>
			</ul>
			<div id="msg2" style="margin-top: 10px;text-align: left;"></div>
		</fieldset>
		<fieldset>
			<legend>创建图片</legend>
			<div id="msg3"></div>
		</fieldset>
		<fieldset>
			<legend>克隆图片</legend>
			<div id="msg4"></div>
		</fieldset>
		<script>
			//179000516 王德令
			//菜单收缩与扩展
			function show(title) {
				let currentMenu = document.querySelectorAll(".menu");
				for(let i = 0;i<currentMenu.length;i++){
					currentMenu[i].style.display = "none";
				}
				let currentStatus = document.getElementById(title);
					currentStatus.style.display = "block";
			}
			//获取原始图片路径
			function showImg() {
				let img1 = document.querySelector("#fruit");
				let msg1 = document.getElementById("msg1");
				msg1.innerHTML = img1.getAttribute("src");
			}
			//获取喜欢的水果
			function getFruit() {
				let arr = [];
				let enjoy = document.getElementsByName("enjoy")
				let msg2 = document.getElementById("msg2");
				for (var i = 0; i < enjoy.length; i++) {
					let checked = enjoy[i].getAttribute("checked");
					if (checked == "checked") {   //挑选被选中的水果
						arr.push(enjoy[i].value); //把获取的内容放到数组里保存
					}
				}
				msg2.innerHTML = arr;             //最后进行赋值即可
			}
			//创建图片
			function createImg() {
				let msg3 = document.querySelector("#msg3");
				let cimg = document.createElement("img");  //创建一个img标签
				cimg.setAttribute("src", "img/grape.jpg"); //给标签定义属性src，放入图片路径img/grape.jpg
				if (msg3.childNodes.length < 1) {          //对应输出框进行条件判断
					msg3.appendChild(cimg);
					// console.log(cimg.childNodes.length);
				} else {
					alert("一次只能创建一张图片"); //alert...
				}
			}
			//克隆图片
			function cloneImg() {
				let fruit = document.getElementById("fruit"); //找对象
				let msg4 = document.querySelector("#msg4");
				let clonefruit = fruit.cloneNode(true);
				if(msg4.childNodes.length == 0){
					msg4.appendChild(clonefruit);
				}else{
					alert("已经克隆过了");
				}
			}
			//改变图片
			function changeImg() {
				let fruit = document.getElementById("fruit"); 	   //找对象
				if (fruit.getAttribute("src") == "img/fruit.jpg") {//更改对象的属性即可
					fruit.setAttribute("src","img/grape.jpg");
				} else {
					fruit.setAttribute("src","img/fruit.jpg");
				}
			}
			//删除图片
			function removeImg() {
				let fruit = document.getElementById("fruit"); //找对象
				fruit.setAttribute("src","");				  //把对象的属性改变为空即删除了图片
			}
			//操作样式1
			function changeCss1() {
				let fruit = document.getElementById("fruit"); //找对象
				fruit.style.border = "#000000 5px solid";
			}
			//操作样式2
			function changeCss2() {
				let fieldset = document.getElementsByTagName("fieldset");
				for(let i = 0;i<fieldset.length;i++){
					fieldset[i].style.background="#ff0";
				}
			}
		</script>
	</body>
</html>
